<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/custom.popover.css" rel="stylesheet" />
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
		<style>
			.mui-plus .plus {
				display: inline;
			}

			.plus {
				display: none;
			}

			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}

			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}

			p {
				text-indent: 22px;
			}

			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}

			.mui-popover {
				height: 300px;
			}

			.mui-content {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
			<h1 class="mui-title">popover（弹出菜单）</h1>
		</header>
		<footer class="mui-bar mui-bar-footer">
			<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
		</footer>
		<div class="mui-content">
			<div class="mui-content-padded">
				<p>popover（弹出菜单）是mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p>
				<p>popover最常用的两个位置：顶部导航栏右侧和底部工具栏右侧； 点击本页右上角的
					<span class="mui-icon mui-icon-bars"></span> 图标体验，
					<!--TODO 后续增加原生标题示例-->
					<!--<span class="plus">这是一个<strong>原生标题栏</strong>触发的popover示例，
					<span class="mui-icon mui-icon-bars"></span>在父webview中，点击后通过自定义事件 通知子webview， 子webview再执行popover的显示隐藏逻辑； </span>-->
					接着点击本页面右下角的“菜单”按钮体验。
				</p>
				<p>除了页面顶部导航栏、底部工具栏固定位置之外，其它区域要使用弹出菜单，都要准确计算物理位置，从而实现弹出菜单的绝对定位；
					mui封装的手势事件中，可以获得点击位置，通过这些位置可实现任意区域的弹出菜单显示，点击如下按钮体验：
				</p>
				<p style="text-indent: 0;">
					<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
						style="padding: 5px 20px;">打开弹出菜单</a>
					<a href="#share" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
						style="padding: 5px 20px;">mui.custom.popover.share</a>
				</p>
			</div>
		</div>
		<!--右上角弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#">Item1</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item2</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item3</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item4</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item5</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item6</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item7</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item8</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item9</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item10</a>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">Item1</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item2</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item3</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item4</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item5</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item6</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item7</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item8</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item9</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item10</a>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<!--右下角弹出菜单-->
		<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">Item1</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item2</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item3</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item4</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item5</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item6</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item7</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item8</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item9</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item10</a>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			var shareData = [
				{guid: '1', userName: 'u1'},
				{guid: '2', userName: 'u2'},
				{guid: '3', userName: 'u3'},
				{guid: '4', userName: 'u4'},
				{guid: '5', userName: 'u5'},
				{guid: '6', userName: 'u6'},
				{guid: '7', userName: 'u7'},
				{guid: '8', userName: 'u8'},
				{guid: '9', userName: 'u9'},
			];
			mui.init();

			mui.plusReady(function() {
				//				var view = plus.nativeObj.View.getViewById("title");
				//				
				//				var bitmap = new plus.nativeObj.Bitmap("back");
				//				bitmap.loadBase64Data("");
				//				view.drawBitmap(bitmap, {}, {
				//					top: "10px",
				//					left: "10px",
				//					width: "24px",
				//					height: "24px"
				//				});
				//				
				//				view.setTouchEventRect({top:"0px",left:"0px",width:"44px",height:"100%"});
			});

			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});

			(function(doc) {
				var inputVal = '', shareDataAll = [];
				shareDiv = doc.createElement('div');
				shareDiv.setAttribute('id', 'share');
				shareDiv.setAttribute('class', 'mui-popover mui-popover-action custom-popover search share');
				shareDiv.innerHTML = '<ul class="mui-table-view table-view-top">\
										<li class="mui-table-view-cell center">\
											<a href="#share" class="mui-icon mui-icon-closeempty"></a>\
											<span class="title">选择项分享人</span>\
										</li>\
										<li class="mui-table-view-cell">\
											<div class="mui-input-row">\
												<span class="mui-icon mui-icon-search"></span>\
												<input id="searchInput" type="text" class="mui-input-clear" \
												style="font-size: 15px;" autocomplete="off" placeholder="请输入">\
											</div>\
										</li>\
									</ul>\
									<ul class="mui-table-view table-view-middle">\
										<li class="mui-scroll-wrapper">\
											<div class="mui-scroll"><ul class="mui-table-view"></ul></div>\
										</li>\
									</ul>';
									
				// 此组件中间列表区域原结构是 <ul class="mui-table-view table-view-middle"></ul> 在安卓机中会出现无法滚动的现象
				// 为解决无法滚动 特添加 mui-scroll-wrapper  mui-scroll 结构 并使用mui('.mui-scroll-wrapper').scroll() 进行初始化
				doc.body.appendChild(shareDiv);
				mui('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: true,
					deceleration: 0.0006
				});

				initSharePopover();

				// 初始化或更新popover列表组件内容
				function initSharePopover() {
					shareDataAll = shareData;
					renderListHtml();
				}

				function renderListHtml() {
					var shareHtml = '';
					// alert('init favorite popup -> init popup -> ')
					// 获取当前情况下的收藏夹列表进行初始化操作
					for (var i in shareData) {
						shareHtml += '<li class="mui-table-view-cell">\
										  <a class="share-item" href="#share" id="' + shareData[i].guid + '" \
										  name="' + shareData[i].userName + '">' + shareData[i].userName + '</a>\
									</li>';
					}
					// type="checkbox" ' + checked + ' onchange="favoriteChange(this)">\
					shareHtml += '';
					// html += '<li class="mui-table-view-cell" style="height: 60px;"></li>'
					doc.querySelector('.share .mui-table-view.table-view-middle .mui-table-view').innerHTML = shareHtml;
					listnerShareChoose();
				}

				function listnerShareChoose() {
					mui.each(document.querySelectorAll('.share .table-view-middle .share-item'), function(i, ele) {
						ele.addEventListener('tap', function() {
							var val = ele.getAttribute('id');
							var name = ele.getAttribute('name');
							console.log('id -> ' + val);
							console.log('name -> ' + name);
						}, false);
					});

					document.querySelector('.share .table-view-top .mui-input-row input').addEventListener('change',
						function() {
							// alert(this.value);
							if (this.value) {
								inputVal = this.value;
								shareData = shareDataAll.filter(shareItemFilter);
							} else {
								shareData = shareDataAll;
							}
							renderListHtml();
						});

					function shareItemFilter(item) {
						return item.userName.includes(inputVal);
					}
				}
			}(document));
		</script>
	</body>

</html>
